<template>
  <div class="e-wrap">
    <w-form-validate @on-validate="modifyPassword">
      <div class="e-item">
          <span class="title">原密码:</span>
          <div class="dis-block">
            <w-input type='password' :holder="`请填写`" v-model="params.oldPassword" rule="isEmpty|isPassword" error="*此项必填|*密码需6至20位,字母和数字组合"></w-input>
          </div>
      </div>
      <div class="e-item">
        <span class="title">新密码:</span>
        <div class="dis-block">
          <w-input type='password' :holder="`请填写`" v-model="params.password" rule="isEmpty|isPassword" error="*此项必填|*密码需6至20位,字母和数字组合"></w-input>
        </div>
      </div>
      <div class="e-item">
        <span class="title">确认密码:</span>
        <div class="dis-block">
          <w-input type='password' :holder="`请填写`" v-model="params.checkPwd" rule="isEmpty" error="*此项必填" @on-blur='checkPassword'></w-input>
        </div>
        <div class="error-tip" v-text="errorMsg"></div>
      </div>
      <!-- 保存按钮 -->
      <button type="submit" class="save-btn">确定</button>
      <!-- <div class="save-btn">
          <w-button type="submit">确定</w-button>
      </div> -->
    </w-form-validate>
  </div>
</template>

<script>
import { apiModifyPwd } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      params: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        oldPassword: '',
        password: '',
        checkPwd: ''
      },
      errorMsg: null
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    checkPassword() {
      if (!this.params.checkPwd) return
      if (this.params.checkPwd != this.params.password) {
        this.errorMsg = '*两次输入的密码不一致'
      } else {
        this.errorMsg = ''
      }
    },
    modifyPassword() {
      if (this.errorMsg) return
      
      // 判断新旧密码是否一致
      if (this.params.oldPassword == this.params.password) {
        this.$toast('新旧密码不能一样')
        return
      }
      
      // 判断两次输入的密码是否一致
      if (this.params.checkPwd != this.params.password) {
        this.$toast('两次输入的密码不一致')
        return
      } 

      this.params.accessToken = this.token
      this.params.oldPassword = md5(this.params.oldPassword)
      this.params.password = md5(this.params.password)
      apiModifyPwd(this.params).then(data => {
        if (data.code != 200) return
        this.$toast('修改成功!', () => {
          this.$router.push(`/login`)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-wrap {
    width: 350px;
    margin: 30px auto;
    .e-item {
      display: block;
      margin-bottom: 20px;
      margin-left: 0;
      .dis-block {
        width: 220px;
        vertical-align: middle;
      }
    }
    .save-btn {
      margin: 0 auto;
      display: block;
      position: relative;
      margin-top: 30px;
      width: 90px;
      height: 30px;
      border-radius: 4px;
      background: $color-main;
      color: #fff;
    }
    .error-tip {
      // position: absolute;
      // margin-top: -10px;
      color: #a94442;
      margin-left: 70px;
    }
}
</style>